<script lang="ts">
import { onMounted, inject } from 'vue'
import * as Cesium from 'cesium'

export default {
  name: 'CesiumContainer',
  setup () {
    const viewer = inject<Cesium.Viewer>('Viewer')
    if (!viewer) return
    onMounted(() => {
      /* eslint no-new: */
      // const viewer = new Cesium.Viewer('cesiumContainer')
      var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
      handler.setInputAction(function (movement) {
        const position = movement.position
        const cartesian3 = viewer.scene.globe.pick(
          viewer.camera.getPickRay(position),
          viewer.scene
        )
        viewer.entities.add({
          position: cartesian3,
          point: {
            show: true,
            pixelSize: 10, // 像素大小
            heightReference: Cesium.HeightReference.NONE,
            color: Cesium.Color.YELLOW,
            outlineColor: Cesium.Color.BLACK,
            outlineWidth: 0,
            scaleByDistance: new Cesium.NearFarScalar(1.0e3, 10.0, 2.0e3, 1.0),
            translucencyByDistance: new Cesium.NearFarScalar(
              1.0e3,
              1.0,
              1.5e6,
              0.5
            ),
            disableDepthTestDistance: Number.POSITIVE_INFINITY
          }
        })
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
      viewer.entities.add({
        id: 'entity_1',
        name: 'rectangle',
        description: '这是一个矩形',
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -97.5, 22.0),
          material: Cesium.Color.GREEN
        }
      })
      viewer.zoomTo(viewer.entities)
      handler.setInputAction(function (event) {
        const picked = viewer.scene.pick(event.position)
        console.log(picked)
        if (Cesium.defined(picked)) {
          console.log(picked?.id)
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    })
  }
}
</script>
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100%;
  position: relative;
}
#mouse_state {
  position: absolute;
  bottom: 0;
  left: 20px;
  height: 20px;
  width: 500px;
  color: #fff;
  font-size: 12px;
  z-index: 20;
}
</style>
